<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>管理员登录</title>
    <link href="https://cdn.bootcss.com/element-ui/1.4.6/theme-default/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.4.6/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <style>
        .el-row {
            margin-bottom: 20px;
            &:last-child {
             margin-bottom: 0;
         }
        }
        /*.login-box {
            margin-left:40%;
        }*/
    </style>
</head>
<body>
    <h3 style="text-align: center;margin-top: 15%;font-family: 微软雅黑;color: #20a0ff">引流后台管理系统</h3>
    <div class="login-box" id="app">
        <el-row>
            <el-col :span="6" :offset="9">
                <el-input id="name"  v-model="name" placeholder="请输入帐号">
                    <template slot="prepend">帐号</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="9">
                <el-input id="password" v-model="password" type="password" placeholder="请输入密码">
                    <template slot="prepend">密码</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6" :offset="9">
                <el-button id="login" v-on:click="check" style="width:100%" type="primary">登录</el-button>
            </el-col>
        </el-row>
    </div>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            name : '',
            password : ''
        },
        methods : {
            check : function(event){
                //获取值
                var name = this.name;
                var password = this.password;
                if(name == '' || password == ''){
                    this.$message({
                        message : '账号或密码为空！',
                        type : 'error'
                    })
                    return;
                }
                var user ={
                    username : name,
                    password : password
                }
                $.ajax({
                    url : '/login',
                    type : 'post',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data : JSON.stringify(user),
                    success : function(data) {
                        if (data.code == 0){
                            window.location.href='/admin'
                        }
                        if (data.code == 500){
                            app.$message.error(data.msg);
                        }
                    },
                    error : function(data) {
                        alert(data);
                    },
                    dataType : 'json',
                })
            }
        }
    })
</script>
</body>
</html>